<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content">积分兑换</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-demo">
          <p style="display: inline-block;font-size: 14px;color: #636363;">账户剩余积分: &nbsp;<span>{{pointInfo.userPoint}}</span></p>
          <p style="display: inline-block;float: right;padding-right: 5px;font-size: 14px;color: #636363;">可兑换积分: &nbsp;<span>{{pointInfo.canPointAmount}}</span>分</p>
        </div></flexbox-item>
      </flexbox>
      <cell gutter="0" style="padding: 0"></cell>
      <flexbox :gutter="0" wrap="nowrap">
        <flexbox-item><div class="flex-demo">
          <p style="font-size: 14px;color: #636363;">本月剩余: &nbsp;可兑换次数<span>{{pointInfo.canPointTime}}</span>次</p>
        </div></flexbox-item>
      </flexbox>
      <cell gutter="0" style="padding: 0"></cell>
      <flexbox :gutter="0" wrap="nowrap">
        <flexbox-item><div class="flex-demo">
          <p style="font-size: 14px;color: #636363;">总计兑换积分: &nbsp;<span>{{pointInfo.hasExchangedAll}}</span></p>
        </div></flexbox-item>
      </flexbox>
      <x-input title='兑换积分:' v-model="cashInvitation" type="number" placeholder="100积分起兑" @on-change="getCashMoney"></x-input>
      <cell gutter="0" style="padding: 5px 0"></cell>
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-cash">
          <p style="font-size: 12px;color: #636363;">到账金额:¥<span>{{cashMoney}}</span></p>
        </div></flexbox-item>
      </flexbox>
    </group>
    <x-button type="primary" @click.native="integralPromptFn" action-type="button" style="width: 200px;margin-top: 20px;background: #3d82e5;font-size: 15px;">兑换</x-button>
    <flexbox>
      <flexbox-item>
        <group gutter="0" style="margin-top: 20px;">
        <div class="flex-rule">
          <p style="text-align: center;font-size: 12px;color: #636363;line-height: 26px;padding-top: 12px;">积分兑换规则</p>
          <ul style="font-size: 12px;color: #aaa9a9;line-height: 26px;padding-bottom: 50px;">
            <li>1、仅会员才可使用积分兑换现金，积分兑换成现金后，存入余额账户;</li>
            <li>2、积分兑换按照20积分提现1元的比例，且兑换积分数为20的整数倍;</li>
            <li>3、每个会员每月仅使用2次积分兑换，每次100积分起兑，每月最多兑换300积分;</li>
            <li>4、积分兑换不可逆;</li>
            <li>5、若有更多兑换需求，可申请额外兑换，申请积分数量大于500;</li>
          </ul>
      </div></group></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { Group, Cell, XButton, XInput, Flexbox, FlexboxItem, Alert } from 'vux'
  import * as urls from '../../../../api/urls'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      XInput,
      Flexbox,
      FlexboxItem,
      Alert,
      YqHeader
    },
    data () {
      return {
        show: false,
        message: '',
        pointInfo: {
          userPoint: 888,
          canPointAmount: 800,
          hasExchangedAll: 123456,
          canPointTime: 2
        },
        cashMoney: 0,
        cashInvitation: '',
        pointScale: ''
      }
    },
    methods: {
      onHide () {
        if (this.message === '兑换申请已提交，兑换金额将在3个工作日内到账') {
//          this.cashInvitation = ''
//          this.cashMoney = 0
//          this.getPointInfo()  // 留在当前页面
          this.$router.go(-1) // 回到我的积分页面
        }
      },
      onShow () {
        console.log('on show')
      },
      getCashMoney () {
        this.cashMoney = parseInt(this.cashInvitation) * this.pointScale
      },
      integralPromptFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.exchange, {userId: userId, exchangePoint: that.cashInvitation}, function (res) {
          if (res.status === 100) {
            // 成功提现
            that.show = true
            that.message = '兑换申请已提交，兑换金额将在3个工作日内到账'
          } else {
            if (res.data.openVip === true) {
              // 非会员提现
              that.$vux.confirm.show({
                title: '提示',
                content: '抱歉，您还不是我们的会员，暂不能享受积分兑换服务',
                confirmText: '开通会员',
                // 组件除show外的属性
                onConfirm () {
                // 跳转开通会员页面
                  that.$router.push({
                    path: '/member/GetMember'
                  })
                  that.$router.go(1)
                }
              })
            }
            if (res.data.extra === true) {
              // 提现额度不足
              that.$vux.confirm.show({
                title: '提示',
                content: '您的兑换额度不足或兑换次数已用完',
                cancelText: '暂不兑换',
                confirmText: '申请额外兑换',
                // 组件除show外的属性
                onConfirm () {
                  // 跳转申请额外提现页面
                  that.ExtraCashFn()
                }
              })
            }
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      ExtraCashFn () {
        this.$router.push({
          path: '/pionts/ExtraCash'
        })
        this.$router.go(1)
      },
      getPointInfo () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.pointExchange, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.pointInfo = res.data
            that.pointScale = res.data.pointPara.pointScale
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      weixinfn14 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.getPointInfo()
      this.weixinfn14()
    }
  }
</script>

<style scoped="scoped" lang="less">
  .flex-demo {
    background-clip: padding-box;
    height: 50px;
    margin-left: 15px;
  }
  .flex-demo > p {
    line-height: 50px;
  }
  .flex-demo > p > span{
    font-weight: bold;
  }
  .flex-cash{
    text-align: left;
    background-clip: padding-box;
  }
  .flex-rule{
    text-align: left;
    background-clip: padding-box;
    padding: 0 10px;
    color: grey;
  }
  .flex-cash > p{
    font-size: 15px;
    margin-bottom: 10px;
    text-align: right;
    margin-right: 10px;
  }
</style>
